<template>
  <el-dropdown ref="compRef" v-bind="{ ...$props }">
    <template v-for="(_slot, slotName) in $slots" #[slotName]="slotProps">
      <slot :name="slotName" v-bind="slotProps" :key="slotName"></slot>
    </template>
  </el-dropdown>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { BaseDropdownExpose } from "./types";
import { ButtonProps } from "element-plus";

interface Props {
  type?:
    | ""
    | "default"
    | "primary"
    | "success"
    | "warning"
    | "info"
    | "danger"
    | "text";
  size?: "large" | "default" | "small";
  buttonProps?: ButtonProps;
  maxHeight?: string | number;
  splitButton?: boolean;
  disabled?: boolean;
  placement?:
    | "top"
    | "top-start"
    | "top-end"
    | "bottom"
    | "bottom-start"
    | "bottom-end";
  clearable?: boolean;
  trigger?: "hover" | "click" | "contextmenu";
  triggerKeys?: string[];
  hideOnClick?: boolean;
  showTimeout?: number;
  hideTimeout?: number;
  role?:
    | "dialog"
    | "grid"
    | "group"
    | "listbox"
    | "menu"
    | "navigation"
    | "tooltip"
    | "tree";
  tabIndex?: number;
  popperClass?: string;
  popperOption?: TObject;
  teleported?: boolean;
  persistent?: boolean;
}

/** 需要按照官网文档设置默认值，否则表现效果和官网文档的不一致 */
withDefaults(defineProps<Props>(), {
  placement: "bottom",
  trigger: "hover",
  triggerKeys: () => ["Enter", "Space", "ArrowDown", "NumpadEnter"],
  hideOnClick: true,
  showTimeout: 150,
  hideTimeout: 150,
  role: "menu",
  tabIndex: 0,
  teleported: true,
  persistent: true,
});

const value = defineModel();
const compRef = ref();

defineExpose<BaseDropdownExpose>({
  // @ts-ignore
  instance: compRef,
});
</script>
<style lang="scss"></style>
